<template>
    <div class="top-category">
        <div class="container">
            <!-- 面包屑 -->
            <Bread>
                <BreadItem to="/">首页</BreadItem>
                <transition name="fade-right" mode="out-in">
                    <BreadItem v-if="cate.name" :key="cate.id">{{  cate.name  }}</BreadItem>
                    <Skeleton v-else width="60px" height="18px" />
                </transition>
            </Bread>
            <!-- 轮播图 -->
            <Carousel :list="sliders" style="height:500px" />
            <!-- 所有二级分类 -->
            <div class="sub-list">
                <h3>全部分类</h3>
                <ul>
                    <li v-for="item in cate.children" :key="item.id">
                        <RouterLink :to="`/category/sub/${item.id}`">
                            <img v-lazy="item.picture">
                            <p>{{  item.name  }}</p>
                        </RouterLink>
                    </li>
                </ul>
            </div>

            <!-- 分类关联商品 -->
            <div class="ref-goods" v-for="item in cate.children" :key="item.id">
                <div class="head">
                    <h3>- {{  item.name  }} -</h3>
                    <p class="tag">{{  item.brands  }}</p>
                    <More :path="`/category/sub/${route.params.id}`" />
                </div>
                <div class="body">
                    <GoodsItem v-for="g in item.goods" :key="g.id" :goods="g" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getBanner } from '@/api/home'
import { getAllCategory } from '@/api/category'
import { onBeforeMount, ref, watch } from 'vue';
import { useRoute } from 'vue-router'
import GoodsItem from './components/goods-item.vue'

const route = useRoute()
const sliders = ref([])
const cate = ref({})

onBeforeMount(async () => {
    const res = await getBanner()
    sliders.value = res.result
})
watch(() => route.params.id, async (newVal) => {
    if (newVal && `/category/${route.params.id}` === route.path) {
        const data = await getAllCategory(route.params.id)
        cate.value = data.result
    }
}, { immediate: true })
</script>
  <style scoped lang="scss">
  .top-category {
      h3 {
          font-size: 28px;
          color: #666;
          font-weight: normal;
          text-align: center;
          line-height: 100px;
      }
  
      .sub-list {
          margin-top: 20px;
          background-color: #fff;
  
          ul {
              display: flex;
              padding: 0 32px;
              flex-wrap: wrap;
  
              li {
                  width: 168px;
                  height: 160px;
  
                  a {
                      text-align: center;
                      display: block;
                      font-size: 16px;
  
                      img {
                          width: 100px;
                          height: 100px;
                      }
  
                      p {
                          line-height: 40px;
                      }
  
                      &:hover {
                          color: $mainColor;
                      }
                  }
              }
          }
      }
  
      .ref-goods {
          background-color: #fff;
          margin-top: 20px;
          position: relative;
  
          .head {
              .more {
                  position: absolute;
                  top: 20px;
                  right: 20px;
              }
  
              .tag {
                  text-align: center;
                  color: #999;
                  font-size: 20px;
                  position: relative;
                  top: -20px;
              }
          }
  
          .body {
              display: flex;
              justify-content: flex-start;
              flex-wrap: wrap;
              padding: 0 65px 30px;
          }
      }
  }
  </style>